<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./fontbc-wd-cl/iconfont.css">
    <script src="./font2/iconfont.js"></script>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .home {
            /* background-color: rgb(169, 169, 40); */
            /* width: 400px; */
            width: 100%;
            height: 970px;
            position: relative;
        }

        .head {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
        }

        .head-top {
            background-color: black;
            width: 100%;
            height: 60px;
            position: relative;
        }

        .head-top-f {
            font-size: 22px;
            font-weight: 500;
            color: white;
            display: inline-block;
            margin-left: 150px;
            margin-top: 10px;
        }

        .head-top-i {
        
           float: right;
            margin-top: 17px;
            margin-right: 15px;
         

        }
        .head-top-i span{
            font-size: 23px;
            color: white;
        }

        .head-top-i img {
            vertical-align: middle;
        }

        .head-buttom {
            width: 100%;
            height: 36px;
            padding-top: 10px;
            background-color: #ffffff;

            border-bottom: #fafafa solid 2px;
            /* margin-bottom: 10px; */
        }

        .head-buttom-a1 {
            width: 65px;
            height: 32px;
            text-align: center;
            display: inline-block;
            border-bottom: 4px solid #008ece;
            position: absolute;
            left: 20px;
        }

        .head-buttom-a2 {
            /* 转化行内快 */
            display: inline-block;
            position: absolute;
            left: 129px;
        }

        .head-buttom-a3 {
            display: inline-block;
            position: absolute;
            left: 225px;
        }

        .head-buttom-a4 {
            display: inline-block;
            position: absolute;
            left: 315px;
        }

        .head-buttom a {
            color: rgb(103, 103, 103);
            /* 清除链接的下划线 */
            text-decoration: none;
            letter-spacing: 2px;
            font-size: 18px;
        }


        /* 轮播图 */
        .bob {
            width: 100%;
            position: relative;
            top: 115px;
            border-radius: 15px;
            background-color: #fafafa;
            margin-top: 10px;
            height: 320px;
        }

        .carousel2 {
            margin-top: 10px;
            margin: auto;
            border-radius: 15px;
        }

        .swiper {
            width: 350px;
            height: 300px;
        }

        .swiper .swiper-wrapper {
            position: relative;
        }

        .swiper .swiper-wrapper img {
            width: 100%;
            height: 100%;
            border-radius: 15px;
        }

        .swiper-horizontal>.swiper-pagination {
            bottom: 15px;
        }

        .swiper-pagination-bullet {
            display: inline-block;
            /* 一行水平排列 */
            width: 18px;
            height: 3px;
            background-color: #099ef5;
            margin-right: 5px;
        }


        /* ------- */



        /* 轮播图下方三张图 */
        .zbot {
            /* 相对定位 */
            position: relative;
            top: 130px;
            width: 100%;
            height: 125px;
            background-color: white;
            /* background-color: #008ece; */
            padding-top: 10px;
            border-bottom: #fafafa 2px solid;
        }

        .bott {
            /* 左浮动 */
            float: left;
            width: 109px;
            height: 32px;
            /* 圆角 */
            border-radius: 10px;
            color: #ffffff;
            /* 字体加粗 */
            font-weight: 500;
            text-align: center;
            /* 顶部的内间距 */
            padding-top: 68px;
            /* 字符间距 */
            letter-spacing: 1px;

        }

        .bot1 {
            background-image: url(images/纯电生活馆.jpg);

            margin-left: 15px;

        }

        .bot2 {
            background-image: url(images/预约试驾.jpg);
            margin-left: 10px;
        }

        .bot3 {
            /* 外左边距 */
            margin-left: 10px;
            background-image: url(images/社区搜索.jpg)
        }

        /* 推荐活动样式*/
        .recom {
            width: 350px;
            height: 50px;
            /* background-color: brown; */
            position: relative;
            top: 116px;
            margin-top: 10px;
            margin-left: 10px;
            background-image: url(images/灰色大于号.png);
            /* 取消图片背景平铺 */
            background-repeat: no-repeat;
            /* 设置图片位置在右边 */
            background-position: right;
            /* 垂直居中 */
            vertical-align: middle;


        }

        .recom-left {
            margin-top: 15px;
            float: left;
            font-size: 20px;
            font-weight: 400;
            letter-spacing: 2px;
        }

        .recom-right {
            float: right;
            margin-top: 15px;
            margin-right: 15px;
            color: #5b5b5b;
            letter-spacing: 2px;
        }


        /* 推荐活动的轮播图 */
        .carousel {
            width: 370px;
            height: 300px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            margin-top: 126px;

        }

        .box {
            /* width: 500px;
            height: 400px; */
            width: 350px;
            height: 270px;
            display: none;
            position: absolute;
            /* background-color: aquamarine; */
            top: 0;
            left: 10px;
            border: 2px solid rgb(252, 250, 250);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 10px;

        }

        .box p {
            margin: 5px;
            font-size: 15px;
            font-weight: 500;
            margin-top: 10px;
        }

        .box img {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            max-width: 100%;
            max-height: 100%;
        }

        .indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .indicator {
            width: 20px;
            /* 设置长条形宽度 */
            height: 5px;
            /* 设置长条形高度 */
            background-color: rgb(115, 114, 114);
            /* 默认白色 */
            margin: 0 5px;
            cursor: pointer;
            border-radius: 3px;


        }

        .indicator.active {
            background-color: rgb(50, 50, 248);
            /* 选中时蓝色 */
        }


        /* 底部导航栏 */

        .icon {
            width: 1.5em;
            height: 1.5em;
            vertical-align: -0.15em;
            overflow: hidden;
            fill: #636161;

        }

        a {
            text-decoration: none;
        }

        body,
        ul,
        p {
            padding: 0;
            margin: 0;

        }

        ul {
            list-style: none;
        }

        .bnav {
            position: fixed;
            /* 固定 */
            left: 0;
            bottom: 0;
            z-index: 9;
            background-color: #f8f5f5;
            width: 100%;
        }

        body {
            margin-bottom: 50px;
            /* 防止最下面的内容看不到，
            和下导航一起出现，固定搭配 */
        }

        .bnav ul {
            display: flex;
            /* 弹性布局 */
        }

        .bnav li {
            position: relative;
            /* 相对定位 */
            width: 30%;
            text-align: center;
            /* 水平居中 */
        }

        .icon {
            font-style: 36px;
            margin: 5px 0;
        }

        .bnav p {
            color: #333;
            line-height: 26px;
            font-size: 10px;
            letter-spacing: 3px;
            /* 字边距 */
        }
    </style>
</head>

<body>
    <div class="home">
        <div class="head">
            <div class="head-top">
                <div class="head-top-f">发 现</div>
                <div class="head-top-i">
                    <span class="iconfont icon-kefu"></span>&nbsp;
                    <span class="iconfont icon-xiaoxi"></span>
                </div>
            </div>
            <div class="head-buttom">
                <div class="head-buttom-a1"> <a href="">推荐</a></div>
                <div class="head-buttom-a2"><a href="">此刻</a></div>
                <div class="head-buttom-a3"> <a href="">活动</a></div>
                <div class="head-buttom-a4"> <a href="">群组</a></div>
            </div>
        </div>

        <!-- 轮播图 -->
        <div class="bob">
            <div class="carousel2">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="images/1.jpg">

                        </div>
                        <div class="swiper-slide">
                            <img src="images/2.jpg">

                        </div>
                        <div class="swiper-slide">
                            <img src="images/3.jpg">

                        </div>
                        <div class="swiper-slide">
                            <img src="images/4.jpg">

                        </div>
                        <div class="swiper-slide">
                            <img src="images/5.jpg">

                        </div>
                        <div class="swiper-slide">
                            <img src="images/6.jpg">

                        </div>
                    </div>

                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <!-- 轮播图下面的三张图 -->
        <div class="zbot">
            <div class="bot1 bott">纯电生活馆</div>
            <div class="bot2 bott">预约试驾</div>
            <div class="bot3 bott">社区搜索</div>
        </div>

        <!-- 推荐活动 -->
        <div class="recom">
            <div class="recom-left">推荐活动</div>
            <div class="recom-right">更多</div>
        </div>


        <!-- 推荐活动下方轮播图 -->

        <div class="carousel">
            <div class="box">
                <img src="images/首页-活动轮播1.png" width="360px" height="200px">
                <p>招募上海车友 | 打卡心动现场，和艺术梦车同框</p>
            </div>
            <div class="box">
                <img src="images/首页-活动轮播3.png" width="360px" height="200px">
                <p>限量发售ing | 『梅赛德斯-AMG冰上驾驶学院』等你来战</p>
            </div>
            <div class="box">
                <img src="images/商品-轮播-2.jpg" width="360px" height="200px">
                <p>冰雪运动爱好者快来结合，准备狂欢！</p>
            </div>
            <div class="indicators">
                <span class="indicator active"></span>
                <span class="indicator"></span>
                <span class="indicator"></span>
            </div>
        </div>


        <!-- 底部导航栏 -->
        <nav class="bnav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yingyongchengxu"></use>
                        </svg>
                        <p>发现</p>

                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-ditudaohang"></use>
                        </svg>
                        <p>地图</p>

                    </a>
                <li>
                    <a href="./car.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-Logo_Benz"></use>
                        </svg>
                        <p>车辆</p>
                        <span class="dot"></span>
                    </a>
                </li>
                <li>
                    <a href="./store.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouwudai"></use>
                        </svg>

                        <p>商店</p>
                    </a>
                </li>
                <li>
                    <a href="./mySelf.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-my"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>

    </div>




    <!-- 轮播图 js-->
    <script src="./swiper/scriptActive/script.js"></script>
    <!-- 轮播图 js-->
    <script src="./swiper/swiper-bundle.min.js"></script>
    <!-- <script src="./swiper/"></script> -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            direction: 'horizontal',/*水平切换。垂直用vertical*/
            loop: true,/*循环模式选项*/
            autoplay: {
                delay: 2000,/*幻灯片切换时间2000毫秒*/
            },
            pagination: {
                el: ".swiper-pagination",/*分页器*/
            },

        });
    </script>





</body>

</html>